<template>
  <div v-show="hasPerms(perms)">
     <el-table :data="tableData" 
        :header-cell-style="tableHeaderColor"
        ref="multipleTable"
        style="width: 100%" 
        :row-class-name="tableRowClassName"
        border
        size="small">
        <el-table-column prop="contactsName" label="联系人名称" width="180" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" width="180" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.sex==1">男</span>
                <span v-if="scope.row.sex==2">女</span>
                <span v-if="scope.row.sex==3">未知</span>
            </template>
        </el-table-column>
        <el-table-column prop="contactsPosition" label="联系人职位名称" align="center"></el-table-column>
        <el-table-column prop="mobile" label="手机号码" align="center"></el-table-column>
        <el-table-column prop="egularPhone" label="固定电话" align="center"></el-table-column>
        <el-table-column prop="faxNumber" label="传真" align="center"></el-table-column>
        <el-table-column prop="QQ" label="QQ" align="center"></el-table-column>
        <el-table-column prop="wechat" label="微信" align="center"></el-table-column>
        <el-table-column prop="email" label="联系邮箱" align="center"></el-table-column>
        <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
        <el-table-column prop="mainContacts" label="主要联系人" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.mainContacts==1">是</span>
                <span v-if="scope.row.mainContacts==2">否</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
            <el-button
                size="mini"
                icon="el-icon-view"
                @click="handleEdit(scope.$index, scope.row)"
                v-if="isView != 1">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
                v-if="isView != 1">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog
      title="添加联系人"
      width="80%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
     <el-form
        :model="dataForm"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-row style="display:flex;">
            <el-form-item label="联系人名称" prop="contactsName">
                <el-input style="width:400px;" v-model="dataForm.contactsName" auto-complete="off" type="text" placeholder="联系人名称"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="dataForm.sex" label="1">男</el-radio>
                <el-radio v-model="dataForm.sex" label="2">女</el-radio>
                <el-radio v-model="dataForm.sex" label="3">未知</el-radio>
            </el-form-item>
            
        </el-row>
        <el-row style="display:flex;">
            <el-form-item label="联系人职位名称" prop="contactsPosition">
                <el-input style="width:400px;" v-model="dataForm.contactsPosition" auto-complete="off" type="text" placeholder="联系人职位名称"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
                <el-input style="width:400px;" v-model="dataForm.mobile" auto-complete="off" type="text" placeholder="手机号码"></el-input>
            </el-form-item>
           
        </el-row>
        <el-row style="display:flex;">
             <el-form-item label="固定电话" prop="egularPhone">
                <el-input style="width:400px;" v-model="dataForm.egularPhone" auto-complete="off" type="text" placeholder="固定电话"></el-input>
            </el-form-item>
            <el-form-item label="传真" prop="faxNumber">
                <el-input style="width:400px;" v-model="dataForm.faxNumber" auto-complete="off" type="text" placeholder="传真"></el-input>
            </el-form-item>
        </el-row>
        <el-row style="display:flex;">
            <el-form-item label="QQ" prop="qq">
                <el-input style="width:400px;" v-model="dataForm.qq" auto-complete="off" type="text" placeholder="QQ"></el-input>
            </el-form-item>
            <el-form-item label="微信" prop="wechat">
                <el-input style="width:400px;" v-model="dataForm.wechat" auto-complete="off" type="text" placeholder="微信"></el-input>
            </el-form-item>
        </el-row>
        <el-row style="display:flex;">
            <el-form-item label="联系邮箱" prop="email">
                <el-input style="width:400px;" v-model="dataForm.email" auto-complete="off" type="text" placeholder="联系邮箱"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
                <el-input style="width:400px;" v-model="dataForm.address" auto-complete="off" type="textarea" placeholder="详细地址"></el-input>
            </el-form-item>
            
        </el-row>
        <el-row>
            <el-form-item label="主要联系人" prop="mainContacts">
                <el-radio v-model="dataForm.mainContacts" label="1">是</el-radio>
                <el-radio v-model="dataForm.mainContacts" label="2">否</el-radio>
            </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button type="primary" @click="checkpaged">保存</el-button>
        <el-button type="primary" @click="dialogClose()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { hasPermission } from '@/permission/index.js'
import citys from '../../../../../static/json/Paje/citys'

export default {
  name: 'personComponent',
  props: {
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },
    show: {  // 按钮是否展示
      type: Boolean,
      default: true
    },
    editDialogVisible:{
        type: Boolean,
        default: false
    },
    supplierId:{
        type:String,
        default: null
    },
    isView:{
        type:String,
        default: null
    }
  },
  data() {
    return {
        value: [],
        options:citys,
        size:"small",
        tableData: [],
        dataForm:{
            contactsName: null,
            sex: '1',//1 男  2 女 3 未知
            contactsPosition: null,
            mobile: null,
            egularPhone:null,
            faxNumber:null,
            qq:null,
            wechat:null,
            email:null,
            address:null,
            mainContacts:"1"
        },
        dataFormRules: {
            contactsName: [
                { required: true, message: "请输入联系人名称", trigger: "blur" },
                { required: true, message: "请输入联系人名称", trigger: "change" }
            ],
        },
    }
  },
  methods: {
    handleClick: function () {
      // 按钮操作处理函数
      this.$emit('click', {})
    },
    hasPerms: function (perms) {  
      if(this.show == false){
        return this.show
      } 
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms)
    },
    //table的双色条纹
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
            return 'warning-row';
        } else if (rowIndex === 3) {
            return 'success-row';
        }
        return '';
    },
    //table的编辑和删除
    handleEdit(index, row) {
        let that = this;
        that.utils.request.querySupplierContactsInfo({id:row.id},res =>{
            if(res.code == '0000' && res.data){
                that.$emit("add",false);
                that.dataForm = res.data;
                that.dataForm.sex = that.dataForm.sex + '';
                that.querySuppliercontacts();
            }
        });
    },
    handleDelete(index, row) {
        let that = this;
        that.$confirm("确认要删除该联系人吗?", "提示", {
          type: "warning"
        }).then(() => {
            this.utils.request.deleteSupplierContactsInfo({id:row.id},res =>{
                if(res.code == '0000'){
                    that.querySuppliercontacts();
                    that.$message({message: '删除成功', type: 'success'})
                }
            });
        })
    },
    //修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
            return 'background-color:rgb(250,250,250);'
        }
    },
    //关闭弹框
    dialogClose(){
        this.$emit("add",false);
        this.dataForm = {
            contactsName: null,
            sex: '1',//1 男  2 女 3 未知
            contactsPosition: null,
            mobile: null,
            egularPhone:null,
            faxNumber:null,
            qq:null,
            wechat:null,
            email:null,
            address:null,
            mainContacts:"1"
        };
    },
    checkpaged(){
        this.$refs["dataForm"].validate((valid) => {
            if(valid){
                let that = this;
                that.dataForm.supplierId = that.supplierId;
                this.utils.request.saveOrUpdateSupplierContacts(that.dataForm,res =>{
                    if(res.code == '0000'){
                        that.dialogClose();
                        that.querySuppliercontacts();
                        that.$message({message: '操作成功', type: 'success'})
                    }
                })
            }
        })

        
    },
    //查询供应商联系人列表
    querySuppliercontacts(){
        this.utils.request.querySupplierContactsList({supplierId:this.supplierId},res =>{
            if(res.code == '0000' && res.data){
                this.tableData = res.data;
            }
        });
    }
  },
  mounted() {
      if(this.supplierId){
          this.querySuppliercontacts();
      }
  }
}
</script>

<style scoped>
</style>